<template>
    <div>
        <com-heard></com-heard>
        <div class="cons">
            <div style="height:25px"></div>
            <div class="per-1 pu-con">
                <div class="pc-11">
                    <img src="../../assets/g-27.png" alt />
                </div>
                <div class="pc-12">
                    <h1>
                        {{user.nickName}}
                        <strong v-if="user.userType==1">VIP 会员</strong>
                        <strong v-else>普通会员</strong>
                    </h1>
                    <p>
                        <strong v-if="user.sex">{{user.sex}}</strong>
                        <strong>{{user.age}}岁</strong>
                    </p>
                    <span>
                        <p>
                            <img src="../../assets/g-28.png" alt />
                            <strong>{{user.mobile}}</strong>
                        </p>
                        <p v-if="user.email">
                            <img src="../../assets/g-29.png" alt />
                            <strong>{{user.email}}</strong>
                        </p>
                    </span>
                </div>
                <div class="pc-13">
                    <p @click="dialogVisible = true">编辑资料</p>
                </div>
            </div>
            <div style="height:20px"></div>
            <div class="pc-2 pu-con">
                <div class="pc-22">
                    <perGX></perGX>
                </div>
            </div>
            <div style="height:30px"></div>
        </div>
        <com-foot></com-foot>
        <el-dialog
            title="信息编辑"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
        >
            <div class="form-box">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="130px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="昵称" prop="nickName">
                        <el-input v-model="ruleForm.nickName" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input
                            type="age"
                            v-model.number="ruleForm.age"
                            autocomplete="off"
                            style="width:300px"
                        ></el-input>
                    </el-form-item>
                    <div class="form-con">
                        <el-form-item label="所在地区" prop="area">
                            <el-cascader
                                :options="options"
                                v-model="ruleForm.area"
                                :separator="' '"
                                style="width:300px"
                            ></el-cascader>
                        </el-form-item>
                    </div>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="ruleForm.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="ruleForm.email" style="width:300px"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="onRelease">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import options from "../../utils/select_area";
import comHeard from '@/components/com-heard'
import comFoot from '@/components/com-foot'
import perTz from '@/views/personal/per-tz'
import perGX from '@/views/personal/per-gx'
export default {
    components: {
        comHeard,
        comFoot,
        perTz, perGX
    },
    inject: ['reload'],
    data() {
        return {
            curIndex: 0,
            dialogVisible: false,
            ruleForm: {},
            user: {},
            options: options,
            rules: {
                nickName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '年龄不能为空' },
                    { type: 'number', message: '年龄必须为数字值' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                area: [
                    { required: true, message: '请选择所在地区', trigger: 'change' }
                ],
            }
        }
    },
    created() {
        this.user = this.$store.getters.user
        console.log(this.user)
    },
    mounted() {

    },
    methods: {
        onRelease() {
            this.$refs.ruleForm.validate(vaild => {
                if (vaild) {
                    this.setInfo()

                    this.dialogVisible = false
                    this.ruleForm = {}

                }
            })
        },
        async setInfo(curIndex, code) {
            var _this = this
            this.ruleForm.id = this.user.id
            this.ruleForm.area = this.ruleForm.area.join("-")
            // const res = await this.$store.dispatch('user/setInfo', this.ruleForm)
            this.$store.dispatch('user/setInfo', this.ruleForm)
                .then((res) => {
                    _this.login()
                })
                .catch(() => {
                })

        },
        async login() {
            var _this = this
            const data = {
                username: this.user.mobile,
                password: this.user.password
            }
            this.$store.dispatch('user/login', data)
                .then((res) => {
                    _this.getInfo()
                })
                .catch(() => {
                    this.loading = false
                })
        },
        async getInfo() {
            var _this = this
            const res = await this.$store.dispatch('user/getInfo', this.ruleForm)
            console.log(res)
            setTimeout(() => {
                _this.reload()
            }, 500)

        },
        onLeftTab(index) {
            this.curIndex = index
        },
        handleClose(done) {
            var _this = this
            this.$confirm('确认关闭？')
                .then(_ => {
                    _this.dialogVisible = false
                    this.ruleForm = {}
                    done();
                })
                .catch(_ => { });
        },
    },
}
</script>

<style scoped>
@import "./personal.css";
</style>
